import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { MoreOutline, CloseOutline } from 'antd-mobile-icons'
import { Button, Input, Form, Switch, } from 'react-vant'
import { Swiper, NavBar, Space, Card, Tabs, Popup, DotLoading, Toast } from 'antd-mobile'
import './lun.css'
import HomeStyle from './Home.module.css'

export default function Berider() {
    const [form] = Form.useForm()
    const [isChecked, setIsChecked] = useState(false);
    const onFinish = values => {
        console.log(values)
    }

    const navigate = useNavigate()
    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '16px' }}>
                <MoreOutline />
            </Space>
        </div>
    )

    const back = () => {
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,

        })
        navigate('/home');

    }

    return (
        <div className={HomeStyle.top}>
            <NavBar backArrow onBack={back} right={right}>
                <h4>成为骑手</h4>
            </NavBar>

            <Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '100px 16px 0' }}>
                        <Button round nativeType='submit' type='primary' block color='orange' onClick={() => {


                            Toast.show({
                                content: '申请已提交',
                                duration: 1000,

                            })
                            navigate('/home');

                        }}>
                            提交
                        </Button>
                    </div>
                }
            >
                <Form.Item


                    rules={[{ required: true, message: '请填写姓名' }]}
                    name='username'
                    label='姓名'
                >
                    <Input placeholder='请输入用户名' style={{ marginLeft: '140px' }} />
                </Form.Item>
                <Form.Item
                    rules={[{ required: true, message: '请填写手机号' },
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码' }]}
                    name='telephone'
                    label='手机号'
                >
                    <Input placeholder='请输入手机号' style={{ marginLeft: '140px' }} />
                </Form.Item>

                <Form.Item
                    rules={[{ required: true, message: '请填写学号' }]}
                    name='sid'
                    label='学号'
                >
                    <Input placeholder='请输入学号' style={{ marginLeft: '140px' }} />
                </Form.Item>

                <Form.Item name='switch' label='是否有过配送经验' valuePropName='checked'>
                    <Switch size={20} onClick={() => setIsChecked(!isChecked)} style={{ marginLeft: '135px', marginTop: '18px' }} />
                    <span style={{ marginTop: '18px' }}>{isChecked ? '是' : '否'}</span>
                </Form.Item>
            </Form>
        </div>
    )
}
